<template>
  <div class="clothingDetail">
    <!-- 查询 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="addBrand">新增</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="12" style="text-align: right">
          <el-form-item label="名称">
            <el-input
              v-model="formInline.name"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findBrand">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column
        prop="objID"
        label="编号"
        width="380"
        v-if="false"
      ></el-table-column>
      <el-table-column prop="objPID" label="PID" v-if="false">
      </el-table-column>
      <el-table-column prop="className" label="种类名称"> </el-table-column>
      <el-table-column prop="objName" label="名称"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="updateinfo(scope.row)"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="del(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pageclass">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="isupdate ? '新增信息' : '修改信息'"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="ID"
          :label-width="formLabelWidth"
          v-show="isupdate == false"
        >
          <el-input v-model="form.objID" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.objPID" filterable placeholder="请选择类型">
            <el-option
              v-for="item in options"
              :key="item.objID"
              :label="item.objName"
              :value="item.objID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.objName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "clothingDetail",
  data() {
    return {
      options: [],
      value: "",
      tableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 40],
      // 默认每页显示的条数（可修改）
      PageSize: 10,
      // 查询
      formInline: {
        name: "",
      },
      isupdate: false,
      dialogFormVisible: false,
      form: {
        objID: "",
        objName: "",
        objPID: "",
      },
      formLabelWidth: "80px",
      rules: {
        name: [{ required: true, message: "请输入品牌名称" }],
      },
      loading: true,
    };
  },
  created() {
    this.LoadPagedata();
  },
  methods: {
    getclass() {
      this.service
        .get("/dict/ClothingClassDict/Get")
        .then((res) => {
          console.log(res);
          this.options = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 时间格式转化
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc !== null) {
        const dateMat = new Date(daterc);
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const hh = dateMat.getHours();
        const mm = dateMat.getMinutes();
        const ss = dateMat.getSeconds();
        const timeFormat =
          year + "-" + month + "-" + day + "-" + hh + ":" + mm + ":" + ss;
        return timeFormat;
      }
    },
    // 加载数据
    Loaddata() {
      this.service
        .get("/dict/ClothingClassDetail/Get")
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    LoadPagedata() {
      var pars = "";
      pars += "?Seachval=" + this.formInline.name;
      pars += "&pageIndex=" + this.currentPage;
      pars += "&PageSize=" + this.PageSize;
      this.loading = true;
      this.service
        .get("/dict/ClothingClassDetail/GetSearch" + pars)
        .then((res) => {
          console.log(res.data.lsList);
          // 将数据赋值给tableData
          this.tableData = res.data.lsList;
          // 将数据的长度赋值给totalCount
          this.totalCount = res.data.totalRows;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
      // 点击每页显示的条数时，显示第一页
      this.LoadPagedata(val, 1);
    },
    // 显示第几页
    handleCurrentChange(val) {
      console.log(val);
      // 改变默认的页数
      this.currentPage = val;
      // 切换页码时，要获取每页显示的条数
      this.LoadPagedata(this.PageSize, val * this.pageSize);
    },
    //修改数据
    updateinfo(row) {
      console.log(row);
      this.isupdate = false;
      this.form = row;
      console.log(this.form);
      this.dialogFormVisible = true;
    },
    //删除数据
    del(row) {
      console.log(row.objID);
      this.service
        .delete("/dict/ClothingClassDetail/Delete?ID=" + row.objID)
        .then((res) => {
          this.$message({
            message: "删除数据成功",
            type: "warning",
          });
          this.LoadPagedata();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //新增数据
    addBrand() {
      this.dialogFormVisible = true;
      this.isupdate = true;
      this.form.objName = "";
      this.getclass();
    },
    //筛选数据
    findBrand() {
      console.log(this.formInline.name);
      this.LoadPagedata();
    },
    //提交数据
    sure(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          //调用新增信息接口
          console.log(this.form);
          this.dialogFormVisible = false;
          if (this.isupdate) {
            //调用添加接口
            this.service
              .post("/dict/ClothingClassDetail/Add", this.form)
              .then((res) => {
                if (res.status == 200) {
                  this.LoadPagedata();
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            //调用修改接口
            this.service
              .put(
                "/dict/ClothingClassDetail/Update?ID=" +
                  this.form.objID +
                  "&Name=" +
                  this.form.objName
              )
              .then((res) => {
                if (res.status == 200) {
                  this.LoadPagedata();
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
          this.$message({
            message: "操作成功！",
            type: "success",
          });
        } else {
          console.log(this.form);
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.clothingDetail {
  text-align: left;
}
.demo-form-inline,
.el-form-item {
  text-align: left;
}
.dialog-footer {
  text-align: center;
}
.pageclass {
  margin-top: 20px;
  text-align: center;
}
</style>
